<template>
  <div class="border-list-wk">
    <div class="count">
      <img style="width:100%;" src="@/assets/images/bg_img.png" alt="">
      <div class="count-container">
        <p class="count-title">{{ data.title }}</p>
        <p class="count-ip">IP:{{ data.ip }}</p>
        <p class="count-time">{{ data.time }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "BorderTopList",
  props: {
    data: {
      type: Object,
      default() {
        return {
          title: '交换机',
          ip: '10.11.123.5',
          time: '2022-07-01 12:34'
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.count {
  position: relative;

  .count-container {
    position: absolute;
    width:100%;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 1.6rem;

    p {
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: .6rem;
      &.count-ip{
        color:#3E94FE;
      }
    }
  }
}

</style>
